<template>
  <div class="reading-notes">
    <van-nav-bar title="读书笔记" left-arrow @click-left="goBack" />
    
    <van-search
      v-model="searchText"
      placeholder="搜索笔记内容"
      @search="onSearch"
    />
    
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group>
        <van-cell
          v-for="note in notes"
          :key="note.id"
          :title="note.bookTitle"
          :label="`第${note.pageNumber}页: ${note.content}`"
          is-link
          @click="viewNoteDetail(note)"
        >
          <template #right-icon>
            <van-tag plain type="primary">{{ note.date }}</van-tag>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    
    <van-popup
      v-model:show="showNoteDetail"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <van-nav-bar
        :title="currentNote.bookTitle"
        left-arrow
        @click-left="showNoteDetail = false"
      >
        <template #right>
          <van-icon name="edit" @click="editNote" />
        </template>
      </van-nav-bar>
      
      <div class="note-detail">
        <div class="note-header">
          <van-tag plain type="primary">第{{ currentNote.pageNumber }}页</van-tag>
          <span class="note-date">{{ currentNote.date }}</span>
        </div>
        
        <div class="note-content">
          {{ currentNote.content }}
        </div>
        
        <div v-if="currentNote.highlightText" class="highlight-text">
          <h4>高亮文本:</h4>
          <p>{{ currentNote.highlightText }}</p>
        </div>
      </div>
    </van-popup>
    
    <van-dialog
      v-model:show="showEditDialog"
      title="编辑笔记"
      show-cancel-button
      @confirm="confirmEdit"
    >
      <van-field
        v-model="editNoteContent"
        rows="4"
        autosize
        type="textarea"
        placeholder="请输入笔记内容"
      />
    </van-dialog>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'ReadingNotes',
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const loading = ref(false)
    const finished = ref(false)
    const showNoteDetail = ref(false)
    const showEditDialog = ref(false)
    const editNoteContent = ref('')
    const activeTab = ref(3)
    
    // 模拟笔记数据
    const notes = ref([
      { id: 1, bookId: 1, bookTitle: 'Vue.js设计与实现', pageNumber: 120, content: '响应式系统的实现原理很精妙', highlightText: '', date: '2023-05-10' },
      { id: 2, bookId: 1, bookTitle: 'Vue.js设计与实现', pageNumber: 180, content: '虚拟DOM的diff算法优化点很多', highlightText: '', date: '2023-05-12' },
      { id: 3, bookId: 2, bookTitle: 'JavaScript高级程序设计', pageNumber: 80, content: '闭包的概念和应用场景需要深入理解', highlightText: '', date: '2023-05-05' }
    ])
    
    const currentNote = ref({
      id: 0,
      bookId: 0,
      bookTitle: '',
      pageNumber: 0,
      content: '',
      highlightText: '',
      date: ''
    })
    
    const goBack = () => {
      router.go(-1)
    }
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const onSearch = () => {
      // 执行搜索
      Toast('搜索: ' + searchText.value)
    }
    
    const onLoad = () => {
      // 模拟加载更多数据
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
    
    const viewNoteDetail = (note) => {
      currentNote.value = { ...note }
      showNoteDetail.value = true
    }
    
    const editNote = () => {
      editNoteContent.value = currentNote.value.content
      showEditDialog.value = true
    }
    
    const confirmEdit = () => {
      // 模拟更新笔记
      const index = notes.value.findIndex(n => n.id === currentNote.value.id)
      if (index !== -1) {
        notes.value[index].content = editNoteContent.value
        currentNote.value.content = editNoteContent.value
        Toast.success('笔记更新成功')
      }
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      searchText,
      loading,
      finished,
      showNoteDetail,
      showEditDialog,
      editNoteContent,
      activeTab,
      notes,
      currentNote,
      goBack,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      onSearch,
      onLoad,
      viewNoteDetail,
      editNote,
      confirmEdit,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.note-detail {
  padding: 15px;
  text-align: left;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.note-date {
  color: #999;
  font-size: 12px;
}

.note-content {
  line-height: 1.6;
  margin-bottom: 20px;
}

.highlight-text {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}

.highlight-text h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.highlight-text p {
  margin: 0;
  color: #666;
}
</style>